<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>问卷调查</title>
</head>
<style>
  #app{
    text-align: center;
    padding: 10px;
  }
  .form-item{
    text-align: left
  }
  .form-item label{
    margin: 10px;
  }
  .form-item textarea{
    width:100%
  }
</style>
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script src="./src/assets/zepto.min.js"></script>
<body>
    <div id="app">
     <h1>{{title}}</h1>
     <form>
       <div class="form-item" v-for="(item,index) in questionList" >
         <p>{{index+1+'.'+item.content}}</p>
         <div v-if='item.type === 1'>
          <label :for="'A'+item.id">A:{{item.a}}<input :id="'A'+item.id" type="radio" :name='item.id' v-model="formData.answers[item.id]" :value="item.a" /></label>
          <label :for="'B'+item.id">B:{{item.b}}<input :id="'B'+item.id" type="radio" :name='item.id' v-model="formData.answers[item.id]" :value="item.b" /></label>
          <label :for="'C'+item.id">C:{{item.c}}<input :id="'C'+item.id" type="radio" :name='item.id' v-model="formData.answers[item.id]" :value="item.c" /></label>
          <label :for="'D'+item.id">D:{{item.d}}<input :id="'D'+item.id" type="radio" :name='item.id' v-model="formData.answers[item.id]" :value="item.d" /></label>
         </div>
         <div v-if='item.type === 2'>
          <label :for="'A'+item.id">A:{{item.a}}<input :id="'A'+item.id" type="checkbox" :name='item.id' v-model="formData.answers[item.id]" :value="item.a" /></label>
          <label :for="'B'+item.id">B:{{item.b}}<input :id="'B'+item.id" type="checkbox" :name='item.id' v-model="formData.answers[item.id]" :value="item.b" /></label>
          <label :for="'C'+item.id">C:{{item.c}}<input :id="'C'+item.id" type="checkbox" :name='item.id' v-model="formData.answers[item.id]" :value="item.c" /></label>
          <label :for="'D'+item.id">D:{{item.d}}<input :id="'D'+item.id" type="checkbox" :name='item.id' v-model="formData.answers[item.id]" :value="item.d" /></label>
         </div>
         <div v-if='item.type === 3'>
          <textarea name="item.id" v-model="formData.answers[item.id]"  rows="10"></textarea>
         </div>
       </div>
     </form>
     <button @click="sendAnswer">提交问卷</button>
    </div>
</body>
<script>
var app = new Vue({
  el: '#app',
  data: {
    title: '问卷标题',
    questionList: [],
    formData: {}
  },
  mounted:function () {
    var questionnaireId = getSerach('id');
    this.title = getSerach('name')||'问卷标题';
    this.formData = { questionnaireId: questionnaireId ,answers: {}};
    $.get('http://120.25.145.214/tss/question/list?questionnaireId='+questionnaireId,function (res) {    
      res.forEach(function(item) {
        this.$set(this.formData.answers,item.id,'')
      }.bind(this));
      this.questionList = res;
    }.bind(this))
  },
  methods:{
    sendAnswer:function(){
      $.ajax({
        type: 'post',
        url: 'http://120.25.145.214/tss/answer/submit',
        data: this.formData,
        dataType: 'json',
        success: function(data) {
          alert('问卷提交成功')
        },
        error: function(data) {
          console.log(data)
        }
      });
    }.bind(this),
  }
})
function getSerach(key){
  var searchObj = {};
  var searchArr = window.location.search.replace('?','').split('&&');
  for(var i=0;i<searchArr.length;i++){
    var f=searchArr[i].split('=');
    searchObj[f[0]]=f[1];
  }
  return searchObj[key]
}
</script>
</html>